<script setup>

import {onMounted, reactive, ref} from "vue";
import {pageList, removeEntity} from "./api/EntityApi.js";
import {PaginationDTO} from "../../model/PaginationDTO.js";
import Create from "./Create.vue";
import Update from "./Update.vue";
import {deleteConfirmation, getEnumLabel} from "../../components/EntityOperate.js";
import {tableColumns, tableCriteria} from './model/EntityConfig.js';
import AppApiRel from "./AppApiRel.vue";

const paginationDTO = new PaginationDTO({});

let tableData = ref([]);
// 查询参数
let pageNum = ref(1)
let pageSize = ref(10)
let totalNum = ref(0)
let criteria = reactive({});
paginationDTO.condition = criteria;

// 弹窗控制
let dialogFormCreateVisible = ref(false)
let dialogFormUpdateVisible = ref(false)
let dialogFormRelVisible = ref(false)

// 修改数据
let form = reactive({})

const handleCurrentChange = (val) => {
  pageNum.value = val
  search();
}

const handleSizeChange = (val) => {
  pageSize.value = val
  search();
}

//新增数据 设置新的空的绑值对象 打开弹窗
const handleAdd = () => {
  dialogFormCreateVisible.value = true
}

//编辑数据 先赋值到表单再弹窗
const handleEdit = (row) => {
  Object.assign(form, row)
  dialogFormUpdateVisible.value = true
}

//编辑数据 先赋值到表单再弹窗
const handleRel = (row) => {
  Object.assign(form, row)
  dialogFormRelVisible.value = true
}

//删除数据 从index位置开始，删除一行即可
const remove = (id) => {
  removeEntity(id).then(() => {
    search();
  })
}

//查询数据
const search = () => {
  paginationDTO.pageSize = pageSize.value;
  paginationDTO.pageNum = pageNum.value;
  pageList(paginationDTO).then((data) => {
    if (data) {
      tableData.value = data.data
      pageSize.value = data.pageSize
      pageNum.value = data.pageNum
      totalNum.value = data.total
    }
  });
}

const clear = () => {
  tableCriteria.forEach(item => {
    criteria[item.key] = null
  })
}

onMounted(() => {
  search();
})

</script>

<template>
  <div style="padding: 10px">
    <div class="button-container">
      <el-button type="primary" @click="handleAdd">新增数据</el-button>
      <div class="input-button-group" v-for="(item, index) in tableCriteria">
        <el-input
            v-if="item.type === 'string'"
            style="width: 300px"
            :placeholder="item.placeholder"
            v-model="criteria[item.key]"
            clearable
        />
        <el-select
            v-else-if="item.type === 'enum'"
            v-model="criteria[item.key]"
            style="width: 150px"
            :placeholder="item.placeholder"
        >
          <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
          />
        </el-select>
        <el-date-picker
            v-else-if="item.type.includes('date')"
            v-model="criteria[item.key]"
            :type="item.type"
            style="width: 400px"
            :placeholder="item.placeholder"
        />
      </div>
      <el-button type="primary" @click="search" style="margin-left: 5px">查询数据</el-button>
      <el-button type="primary" @click="clear" style="margin-left: 5px">清空</el-button>
    </div>


    <div style="margin: 10px 0">
      <el-table :data="tableData" fit>
        <el-table-column
            v-for="column in tableColumns"
            :key="column.key"
            :prop="column.key"
            :label="column.label"
        >
          <template v-slot:default="scope">
            <!-- 根据列类型进行不同的处理 -->
            <span v-if="column.type === 'enum'">
              {{ getEnumLabel(column.options, scope.row[column.key]) }}
            </span>
            <span v-else>
              {{ scope.row[column.key] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button link type="primary" size="small" @click="handleRel(scope.row)">关联
            </el-button>
            <el-button link type="danger" size="small" @click.prevent="deleteConfirmation(scope.row.id,remove)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNum" style="margin-top: 20px; text-align: right;">
      </el-pagination>
    </div>
    <Create v-model:dialogVisible="dialogFormCreateVisible" @refresh="search"></Create>
    <Update v-model:dialogVisible="dialogFormUpdateVisible" v-model:form="form" @refresh="search"></Update>
    <AppApiRel v-model:dialogVisible="dialogFormRelVisible" v-model:form="form" @refresh="search"></AppApiRel>
  </div>
</template>

<style scoped>
.button-container {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 20px;
}

.input-button-group {
  display: flex;
  align-items: center; /* 垂直居中 */
//margin-left: 10px; /* 调整新增按钮和输入框之间的间距 */
}
</style>